<script setup lang='ts'>
import { onMounted, ref, reactive ,markRaw} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Timer, Check, Close, Delete } from '@element-plus/icons-vue'
import http from '../../api/http'

import type { IDeptHs } from '../../types/dept'
import Create from "@/views/Dept/Create.vue"
import Edit from "@/views/Dept/Edit.vue"


//#region  列表分页查询相关
const tableData: IDeptHs[] = reactive([])
const likename = ref('')
const page = ref(1)
const size = ref(3)
const total = ref(0)
//查询用户数据
const getUsers = () => {
    http.getList<IDeptHs>('Dept/page', { page: page.value, size: size.value, name: likename.value })
        .then(res => {
            total.value = res.count
            tableData.length = 0
            tableData.push(...res.data)
        }).catch(err => {
            console.log('err: ', err);
        })
}
//每页数量的改变事件
const handleSizeChange = (val: number) => {
    size.value = val
    getUsers()
}
//翻页
const handleCurrentChange = (val: number) => {
    page.value = val
    getUsers()
}
//#endregion

//#region  添加
const createDialogVisible = ref(false)
const create = () => {
    //弹出添加框
    createDialogVisible.value = true
}
//#endregion 

//#region  修改
const formData = ref({
     deptID:0,
    deptName:'',
    remark:'',
    type:1,
    lastTime:new Date()
})
const editDialogVisible = ref(false)
const edit = (row: IDeptHs) => {
    formData.value = row
    //弹出修改框
    editDialogVisible.value = true

}
//#endregion 

//#region 单个删除
const del = (id: number) => {
    http.delete('Dept',{id:id})
        .then(res => {
            if (res.code == '1') {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                //刷新
                getUsers();
            }
            else {
                ElMessage({
                    message: res.msg,
                    type: 'error',
                })
            }
        })

}
//#endregion

//#region 批量删除
const multipleSelection = ref<IDeptHs[]>([])  //选中的值 全部值
const handleSelectionChange = (val: IDeptHs[]) => {
    multipleSelection.value = val
    //console.log('multipleSelection.value: ', multipleSelection.value)
}
const deleteRange = () => {
    if (multipleSelection.value.length > 0) {
        let ids: number[] = []
        let names: string[] = []
        multipleSelection.value.forEach(v => {
            ids.push(v.deptID)
            names.push(v.deptName)
        })
        ElMessageBox.confirm(
            '确实删除【' + names + '】?',
            '',
            {
                type: 'warning',
                icon: markRaw(Delete),
            }
        ).then(() => {
            //提交删除
            http.deleteBatch('Dept/DeleteBatch',ids)
                .then(res => {
                    if (res.code == '1') {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                        //刷新
                        getUsers();
                    }
                    else {
                        ElMessage({
                            message: res.msg,
                            type: 'error',
                        })
                    }
                })

        })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除!',
                })
            })

    } else {
        ElMessage('请选择需要删除的部门！')
    }
}
//#endregion

//#region  组件挂载（初始化）
onMounted(() => {
    getUsers();
})
//#endregion 

</script>

<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- 头部 操作 -->
        <template #header>
            <div class="card-header">
                <el-button type="success" @click="create()">添加部门</el-button>
                <el-button type="warning" @click="deleteRange">批量删除</el-button>

                <el-input v-model="likename" style="max-width: 300px;margin-left: 12px;" placeholder="请输入查询条件"
                    class="input-with-select">
                    <template #append>
                        <el-button type="primary" @click="getUsers()">查询</el-button>
                    </template>
                </el-input>
            </div>
        </template>
        <!-- 数据表 -->
        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="deptID" label="编号" width="80" />
           
            <el-table-column prop="deptName" label="部门名称" width="120" />
            <el-table-column prop="remark" label="描述" width="60" />
           
            <el-table-column label="操作" fixed="right" width="160">

                <template #default="{ row }">
                    <el-button type="warning" size="small" @click="edit(row)">修改</el-button>
                    <el-popconfirm width="220" :title="'确定删除【' + row.deptName + '】?'" @confirm="del(row.deptID)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                        <template #actions="{ confirm, cancel }">
                            <el-button size="small" @click="cancel">取消</el-button>
                            <el-button type="primary" size="small" @click="confirm">
                                确定
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>

            </el-table-column>
        </el-table>
        <!-- 底部 分页 -->
        <template #footer>
            <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </template>
    </el-card>

    <!-- 新增、修改 弹窗组件 -->
    <Create v-model="createDialogVisible" @refresh="getUsers"></Create>
    <Edit v-model="editDialogVisible" :formData="formData" @refresh="getUsers"></Edit>

</template>


<style scoped></style>